<template>
  <el-dialog
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    title="提示"
    :visible.sync="visible"
    @close="$emit('update:show', false)"
    :show="show"
    width="30%"
  >
    <p class="tips1">是否要切换当前数据？</p>
    <p class="tips2">（由于不同图表数据结构不同，可能导致图表无法显示）</p>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="addtag">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations, mapActions } = createNamespacedHelpers('charts')
export default {
  name: 'confirmDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: this.show
    }
  },
  methods: {
    // 点击确定
    addtag() {
      this.$emit('update:show', false)
      this.setshadeDisplay(false)
      this.setChartsConData({ oldType: this.chartsConData.type })
      this.setChartsConData({ oldWays: this.chartsConData.ways })
      this.setLoading(true)
      this.dispatchNewData({
        axios: this.$axios,
        type: this.chartsConData.type
      }).then(res => {
        this.$emit('rePaint')
      })
    },
    // 点击取消
    cancel() {
      this.$emit('update:show', false)
      this.setLoading(false)
      this.setshadeDisplay(true)
    },
    ...mapMutations([
      'setswitchData',
      'setOldWays',
      'setshadeDisplay',
      'setLoading',
      'setChartsConData'
    ]),
    ...mapActions(['dispatchNewData'])
  },
  computed: {
    ...mapState(['chartsConData'])
  },
  watch: {
    show(val) {
      this.visible = this.show
    }
  }
}
</script>

<style scoped>
.tips1 {
  font-size: 16px;
  text-align: center;
}
.tips2 {
  font-size: 16px;
  text-align: center;
  color: #f2ac35;
}
</style>
